<template>
  <div class="doctor">
    <!-- 查询表单 -->
    <el-form inline :model="condition" ref="Datarefs">
      <el-form-item>
        <el-button type="primary" @click="editUserVisible = true">添加患者信息</el-button>
        <el-button type="primary" @click="handleExportFile">导出</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="users" style="width: 100%" border>
      <el-table-column type="selection" />
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="use" label="真实姓名" width="130" />
      <el-table-column prop="symptom" label="症状" width="250" />
      <el-table-column prop="usesection" label="住院科室" width="130" />
      <el-table-column prop="usephone" label="电话号码" width="130" />
      <el-table-column prop="useage" label="年龄" width="70" />
      <el-table-column prop="usesex" label="性别" width="70" />
      <el-table-column prop="useadress" label="地址" width="120" />
      <el-table-column prop="usetime" label="入院时间" width="190">
        <template #default="scope">
          <span>{{ formatData(scope.row.usetime) }}</span>
        </template>
      </el-table-column>
      <!-- 状态插槽 -->
      <!-- 编辑插槽 -->
      <el-table-column fixed="right" label="操作" width="160">
        <template #default="scope">
          <el-button type="primary" @click="modify(scope.row)">编辑</el-button>
          <el-button type="danger" @click="Remove(scope.row._id)">删除</el-button>
        </template>
      </el-table-column>


    </el-table>

    <!-- 分页器 -->
    <el-pagination background layout="total, prev, pager, next, sizes, ->,  jumper" :total="total"
      :page-sizes="[2, 3, 5, 10, 20]" @current-change="pageChange" @size-change="sizeChange" />

    <!-- 新增或修改会员的对话框 -->
    <el-dialog v-model="editUserVisible" title="编辑会员">
      <!-- 渲染编辑会员表单 -->
      <edit-user ref="editUserRef" @success="handleSaveSucess"></edit-user>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editUserVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { utils, writeFileXLSX } from 'xlsx'
import { ElMessageBox } from 'element-plus'
import EditUser from './edit-doctor.vue'
import { patient } from '../../api/member'
// import { tr } from 'element-plus/es/locale'

export default {
  name: 'Doctor',
  components: {
    EditUser,
  },
  data() {
    return {
      // 编辑对话框的现实隐藏
      editUserVisible: false,
      users: []
    }
  },
  methods: {
    // 日期格式化
    formatData(datetime) {
      return dayjs(datetime).format('YYYY-MM-DD')
    },

    /**
    * 导出 excel
    */
  handleExportFile() {
      // 将待导出数据转换为 sheet 工作表中要使用到的数据，并生成工作表
      const ws = utils.json_to_sheet(this.users)
      // 创建新工作簿
      const wb = utils.book_new()
      // 将工作表追加到工作簿中
      utils.book_append_sheet(wb, ws, "会员信息")
      // 将内存中的工作簿数据写入文件中
      writeFileXLSX(wb, `user-${new Date().toISOString()}.xlsx`)
    },
  },

  async mounted() {
    let result = await patient().then((res) => {
      this.users = res
    })
  }

}
</script>

<style lang="less" >
.el-table .cell {
  text-align: center;
}

.el-dialog {
  width: 500px;
  text-align: center;
  padding-right: 20px;
}
</style>
